<template>
  <div id="canvas" class="canvas" />
</template>
<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
// import { get, gethighLine, getDefinitions } from '@/api/activiti/definition'

export default {
  props: {
    value: {
      type: Object,
      default: () => Object.create({})
    }
  },
  data() {
    return {
      bpmnModeler: null,
      fileList: []
    }
  },
  mounted() {
    this.containerEl = document.getElementById('container')
    this.bpmnModeler = new BpmnModeler({
      container: '#canvas',
      keyboard: { bindTo: document },
      additionalModules: [
        {
          zoomScroll: ['value', ''], // 禁用滚轮滚动
          bendpoints: ['value', ''], // 禁止拖动线
          paletteProvider: ['value', ''], // 禁用左侧面板
          contextPadProvider: ['value', ''], // 禁止点击节点出现contextPad
          labelEditingProvider: ['value', ''] // 禁止双击节点出现label编辑框
        }
      ]
    })
    const resu = '<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:activiti=\"http://activiti.org/bpmn\" id=\"sid-38422fae-e03e-43a3-bef4-bd33b32041b2\" targetNamespace=\"http://bpmn.io/bpmn\" exporter=\"bpmn-js (https://demo.bpmn.io)\" exporterVersion=\"5.1.2\">\n  <process id=\"xmcg\" name=\"项目采购\" isExecutable=\"true\" activiti:description=\"项目采购审批\" activiti:moduleCode=\"purchase_price\">\n    <startEvent id=\"StartEvent_1y45yut\" name=\"开始\">\n      <outgoing>SequenceFlow_0h21x7r</outgoing>\n    </startEvent>\n    <sequenceFlow id=\"SequenceFlow_0h21x7r\" sourceRef=\"StartEvent_1y45yut\" targetRef=\"Task_1hcentk\" />\n    <userTask id=\"Task_1hcentk\" name=\"项目编辑\" activiti:assignee=\"${user}\" activiti:assigneeSelect=\"${user}\" activiti:assigneeType=\"user\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n        <activiti:taskListener class=\"com.microinsight.listener.DevTaskListener\" event=\"all\" />\n      </extensionElements>\n      <incoming>SequenceFlow_0h21x7r</incoming>\n      <incoming>Flow_00pz3sd</incoming>\n      <incoming>Flow_0qqq6on</incoming>\n      <incoming>Flow_0y3juvk</incoming>\n      <incoming>Flow_1fm6ak1</incoming>\n      <outgoing>Flow_0bb7oup</outgoing>\n    </userTask>\n    <sequenceFlow id=\"Flow_0bb7oup\" name=\"提交\" sourceRef=\"Task_1hcentk\" targetRef=\"Activity_1un02qa\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n      </extensionElements>\n      <conditionExpression xsi:type=\"tFormalExpression\">${flag==1}</conditionExpression>\n    </sequenceFlow>\n    <userTask id=\"Activity_1un02qa\" name=\"业务审核\" activiti:assignee=\"190\" activiti:assigneeSelect=\"190\" activiti:assigneeType=\"user\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n        <activiti:taskListener class=\"com.microinsight.listener.DevTaskListener\" event=\"all\" />\n      </extensionElements>\n      <incoming>Flow_0bb7oup</incoming>\n      <outgoing>Flow_1v52n1y</outgoing>\n      <outgoing>Flow_00pz3sd</outgoing>\n    </userTask>\n    <sequenceFlow id=\"Flow_1v52n1y\" name=\"同意\" sourceRef=\"Activity_1un02qa\" targetRef=\"Activity_0rchtdw\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n      </extensionElements>\n      <conditionExpression xsi:type=\"tFormalExpression\">${flag==1}</conditionExpression>\n    </sequenceFlow>\n    <userTask id=\"Activity_0rchtdw\" name=\"法务审核\" activiti:assignee=\"191\" activiti:assigneeSelect=\"191\" activiti:assigneeType=\"user\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n        <activiti:taskListener class=\"com.microinsight.listener.DevTaskListener\" event=\"all\" />\n      </extensionElements>\n      <incoming>Flow_1v52n1y</incoming>\n      <outgoing>Flow_0y3juvk</outgoing>\n      <outgoing>Flow_11mi9u8</outgoing>\n    </userTask>\n    <sequenceFlow id=\"Flow_0ej6tqd\" name=\"需要\" sourceRef=\"Gateway_0kcvjde\" targetRef=\"Activity_1pl4484\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n      </extensionElements>\n      <conditionExpression xsi:type=\"tFormalExpression\">${need==1}</conditionExpression>\n    </sequenceFlow>\n    <userTask id=\"Activity_1pl4484\" name=\"财务审核\" activiti:assignee=\"195\" activiti:assigneeSelect=\"195\" activiti:assigneeType=\"user\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n        <activiti:taskListener class=\"com.microinsight.listener.DevTaskListener\" event=\"all\" />\n      </extensionElements>\n      <incoming>Flow_0ej6tqd</incoming>\n      <outgoing>Flow_0qqq6on</outgoing>\n      <outgoing>Flow_1ezz9nj</outgoing>\n    </userTask>\n    <endEvent id=\"Event_041v701\" name=\"结束\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n      </extensionElements>\n      <incoming>Flow_0192yu6</incoming>\n    </endEvent>\n    <sequenceFlow id=\"Flow_0192yu6\" name=\"同意\" sourceRef=\"Activity_0t3saki\" targetRef=\"Event_041v701\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n      </extensionElements>\n      <conditionExpression xsi:type=\"tFormalExpression\">${flag==1}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id=\"Flow_00pz3sd\" name=\"驳回/撤销\" sourceRef=\"Activity_1un02qa\" targetRef=\"Task_1hcentk\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n      </extensionElements>\n      <conditionExpression xsi:type=\"tFormalExpression\">${flag==0}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id=\"Flow_0qqq6on\" name=\"驳回/撤销\" sourceRef=\"Activity_1pl4484\" targetRef=\"Task_1hcentk\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n      </extensionElements>\n      <conditionExpression xsi:type=\"tFormalExpression\">${flag==0}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id=\"Flow_0y3juvk\" name=\"驳回/撤销\" sourceRef=\"Activity_0rchtdw\" targetRef=\"Task_1hcentk\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n      </extensionElements>\n      <conditionExpression xsi:type=\"tFormalExpression\">${flag==0}</conditionExpression>\n    </sequenceFlow>\n    <exclusiveGateway id=\"Gateway_0kcvjde\" name=\"是否需要财务审核\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n      </extensionElements>\n      <incoming>Flow_11mi9u8</incoming>\n      <outgoing>Flow_0ej6tqd</outgoing>\n      <outgoing>Flow_0rhun4h</outgoing>\n    </exclusiveGateway>\n    <sequenceFlow id=\"Flow_11mi9u8\" name=\"同意\" sourceRef=\"Activity_0rchtdw\" targetRef=\"Gateway_0kcvjde\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n      </extensionElements>\n      <conditionExpression xsi:type=\"tFormalExpression\">${flag==1}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id=\"Flow_1ezz9nj\" name=\"同意\" sourceRef=\"Activity_1pl4484\" targetRef=\"Activity_0t3saki\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n      </extensionElements>\n      <conditionExpression xsi:type=\"tFormalExpression\">${flag==1}</conditionExpression>\n    </sequenceFlow>\n    <userTask id=\"Activity_0t3saki\" name=\"业务终审\" activiti:assignee=\"197\" activiti:assigneeSelect=\"197\" activiti:assigneeType=\"user\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n        <activiti:taskListener class=\"com.microinsight.listener.DevTaskListener\" event=\"all\" />\n      </extensionElements>\n      <incoming>Flow_1ezz9nj</incoming>\n      <incoming>Flow_0rhun4h</incoming>\n      <outgoing>Flow_0192yu6</outgoing>\n      <outgoing>Flow_1fm6ak1</outgoing>\n    </userTask>\n    <sequenceFlow id=\"Flow_1fm6ak1\" name=\"驳回/撤销\" sourceRef=\"Activity_0t3saki\" targetRef=\"Task_1hcentk\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n      </extensionElements>\n      <conditionExpression xsi:type=\"tFormalExpression\">${flag==0}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id=\"Flow_0rhun4h\" name=\"不需要\" sourceRef=\"Gateway_0kcvjde\" targetRef=\"Activity_0t3saki\">\n      <extensionElements>\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"statrt\" />\n        <activiti:executionListener class=\"com.microinsight.listener.DevExecutionListener\" event=\"end\" />\n      </extensionElements>\n      <conditionExpression xsi:type=\"tFormalExpression\">${need==0}</conditionExpression>\n    </sequenceFlow>\n  </process>\n  <bpmndi:BPMNDiagram id=\"BpmnDiagram_1\">\n    <bpmndi:BPMNPlane id=\"BpmnPlane_1\" bpmnElement=\"xmcg\">\n      <bpmndi:BPMNEdge id=\"Flow_0rhun4h_di\" bpmnElement=\"Flow_0rhun4h\">\n        <omgdi:waypoint x=\"810\" y=\"145\" />\n        <omgdi:waypoint x=\"810\" y=\"250\" />\n        <omgdi:waypoint x=\"1130\" y=\"250\" />\n        <omgdi:waypoint x=\"1130\" y=\"160\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"954\" y=\"232\" width=\"33\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_1fm6ak1_di\" bpmnElement=\"Flow_1fm6ak1\">\n        <omgdi:waypoint x=\"1170\" y=\"160\" />\n        <omgdi:waypoint x=\"1170\" y=\"290\" />\n        <omgdi:waypoint x=\"280\" y=\"290\" />\n        <omgdi:waypoint x=\"280\" y=\"160\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"703\" y=\"272\" width=\"47\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_1ezz9nj_di\" bpmnElement=\"Flow_1ezz9nj\">\n        <omgdi:waypoint x=\"1030\" y=\"150\" />\n        <omgdi:waypoint x=\"1030\" y=\"120\" />\n        <omgdi:waypoint x=\"1120\" y=\"120\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"1058\" y=\"132\" width=\"23\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_11mi9u8_di\" bpmnElement=\"Flow_11mi9u8\">\n        <omgdi:waypoint x=\"660\" y=\"120\" />\n        <omgdi:waypoint x=\"785\" y=\"120\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"709\" y=\"103\" width=\"23\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_0y3juvk_di\" bpmnElement=\"Flow_0y3juvk\">\n        <omgdi:waypoint x=\"610\" y=\"80\" />\n        <omgdi:waypoint x=\"610\" y=\"-10\" />\n        <omgdi:waypoint x=\"260\" y=\"-10\" />\n        <omgdi:waypoint x=\"260\" y=\"80\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"413\" y=\"-28\" width=\"47\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_0qqq6on_di\" bpmnElement=\"Flow_0qqq6on\">\n        <omgdi:waypoint x=\"980\" y=\"80\" />\n        <omgdi:waypoint x=\"980\" y=\"-70\" />\n        <omgdi:waypoint x=\"250\" y=\"-70\" />\n        <omgdi:waypoint x=\"250\" y=\"80\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"593\" y=\"-88\" width=\"47\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_00pz3sd_di\" bpmnElement=\"Flow_00pz3sd\">\n        <omgdi:waypoint x=\"450\" y=\"80\" />\n        <omgdi:waypoint x=\"450\" y=\"50\" />\n        <omgdi:waypoint x=\"280\" y=\"50\" />\n        <omgdi:waypoint x=\"280\" y=\"80\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"343\" y=\"32\" width=\"47\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_0192yu6_di\" bpmnElement=\"Flow_0192yu6\">\n        <omgdi:waypoint x=\"1220\" y=\"120\" />\n        <omgdi:waypoint x=\"1362\" y=\"120\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"1298\" y=\"102\" width=\"23\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_0ej6tqd_di\" bpmnElement=\"Flow_0ej6tqd\">\n        <omgdi:waypoint x=\"835\" y=\"120\" />\n        <omgdi:waypoint x=\"930\" y=\"120\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"873\" y=\"102\" width=\"23\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_1v52n1y_di\" bpmnElement=\"Flow_1v52n1y\">\n        <omgdi:waypoint x=\"500\" y=\"120\" />\n        <omgdi:waypoint x=\"560\" y=\"120\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"519\" y=\"102\" width=\"23\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_0bb7oup_di\" bpmnElement=\"Flow_0bb7oup\">\n        <omgdi:waypoint x=\"330\" y=\"120\" />\n        <omgdi:waypoint x=\"400\" y=\"120\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"354\" y=\"102\" width=\"22\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"SequenceFlow_0h21x7r_di\" bpmnElement=\"SequenceFlow_0h21x7r\">\n        <omgdi:waypoint x=\"188\" y=\"120\" />\n        <omgdi:waypoint x=\"230\" y=\"120\" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNShape id=\"StartEvent_1y45yut_di\" bpmnElement=\"StartEvent_1y45yut\">\n        <omgdc:Bounds x=\"152\" y=\"102\" width=\"36\" height=\"36\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"160\" y=\"145\" width=\"22\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Activity_0h5c8hy_di\" bpmnElement=\"Task_1hcentk\">\n        <omgdc:Bounds x=\"230\" y=\"80\" width=\"100\" height=\"80\" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Activity_1liwggj_di\" bpmnElement=\"Activity_1un02qa\">\n        <omgdc:Bounds x=\"400\" y=\"80\" width=\"100\" height=\"80\" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Activity_0nrzj1w_di\" bpmnElement=\"Activity_0rchtdw\">\n        <omgdc:Bounds x=\"560\" y=\"80\" width=\"100\" height=\"80\" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Activity_0y8id41_di\" bpmnElement=\"Activity_1pl4484\">\n        <omgdc:Bounds x=\"930\" y=\"80\" width=\"100\" height=\"80\" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Event_041v701_di\" bpmnElement=\"Event_041v701\">\n        <omgdc:Bounds x=\"1362\" y=\"102\" width=\"36\" height=\"36\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"1369\" y=\"148\" width=\"23\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Gateway_0kcvjde_di\" bpmnElement=\"Gateway_0kcvjde\" isMarkerVisible=\"true\">\n        <omgdc:Bounds x=\"785\" y=\"95\" width=\"50\" height=\"50\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"766\" y=\"71\" width=\"88\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Activity_1m3tl63_di\" bpmnElement=\"Activity_0t3saki\">\n        <omgdc:Bounds x=\"1120\" y=\"80\" width=\"100\" height=\"80\" />\n      </bpmndi:BPMNShape>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>\n'
    this.bpmnModeler.importXML(resu)
    const res = { highPoint: ['StartEvent_1y45yut', 'Task_1hcentk'], highLine: [null, 'SequenceFlow_0h21x7r', 'Flow_0bb7oup'], waitingToDo: ['Activity_1un02qa'], iDo: ['Task_1hcentk'] }
    var ColorJson = this.getByColor(res)
    for (var i in ColorJson) {
      this.setColor(ColorJson[i], this.bpmnModeler)
    }
  },
  created() {
    // this.get('')
  },
  methods: {
    create() {
      this.bpmnModeler.createDiagram(() => {
        this.bpmnModeler.get('canvas').zoom('fit-viewport')
      })
    },
    handleRemove(file) {
      for (let i = 0; i < this.fileList.length; i++) {
        if (file.name === this.fileList[i].name) {
          this.fileList.splice(i, 1)
        }
      }
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleOnchangeFile(file) {
      const reader = new FileReader()
      let data = ''
      reader.readAsText(file.raw)
      reader.onload = (event) => {
        data = event.target.result
        this.bpmnModeler.importXML(data, (err) => {
          if (err) {
            this.$message.info('导入失败')
          } else {
            this.$message.success('导入成功')
          }
        })
      }
    },
    setColor(json, bpmnModeler) {
      var modeling = bpmnModeler.get('modeling')
      var elementRegistry = bpmnModeler.get('elementRegistry')
      var elementToColor = elementRegistry.get(json.name)
      if (elementToColor) {
        modeling.setColor([elementToColor], {
          stroke: json.stroke,
          fill: json.fill
        })
      }
    },
    getByColor(data) {
      var ColorJson = []
      for (var k in data['highLine']) {
        var par = {
          'name': data['highLine'][k],
          'stroke': 'green',
          'fill': 'green'
        }
        ColorJson.push(par)
      }
      for (const k in data['highPoint']) {
        const par = {
          'name': data['highPoint'][k],
          'stroke': 'gray',
          'fill': '#eae9e9'

        }
        ColorJson.push(par)
      }
      for (const k in data['iDo']) {
        const par = {
          'name': data['iDo'][k],
          'stroke': 'green',
          'fill': '#a3d68e'
        }
        ColorJson.push(par)
      }
      for (const k in data['waitingToDo']) {
        const par = {
          'name': data['waitingToDo'][k],
          'stroke': 'green',
          'fill': 'yellow'
        }
        ColorJson.push(par)
      }
      return ColorJson
    }
  }
}
</script>
<style lang="less" scoped>
/*左边工具栏以及编辑节点的样式*/
@import "~bpmn-js/dist/assets/diagram-js.css";
.canvas {
  width: 100%;
  height: 400px;
}

</style>
